(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "maishu-jueying", "react", "components/common/base-component", "mobile/services/shoppingService", "maishu-services-sdk", "maishu-ui-toolkit", "controls/product-select-dialog"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const maishu_jueying_1 = require("maishu-jueying");
    const React = require("react");
    const base_component_1 = require("components/common/base-component");
    const shoppingService_1 = require("mobile/services/shoppingService");
    const maishu_services_sdk_1 = require("maishu-services-sdk");
    const maishu_ui_toolkit_1 = require("maishu-ui-toolkit");
    const product_select_dialog_1 = require("controls/product-select-dialog");
    class ProductSourceEditor extends maishu_jueying_1.PropEditor {
        constructor(props) {
            super(props);
            this.shoppingService = base_component_1.createService(shoppingService_1.ShoppingService);
            this.imageService = base_component_1.createService(maishu_services_sdk_1.ImageService);
        }
        setProductDelete(e, productId) {
            if (!e || e.onclick)
                return;
            e.onclick = () => {
                let value = this.state.value.filter(o => o != productId);
                this.setState({ value });
            };
        }
        setProductAdd(e) {
            if (!e || e.onclick)
                return;
            e.onclick = () => {
                product_select_dialog_1.ProductSelectDialog.show((products) => this.productSelected(products));
            };
        }
        productSelected(products) {
            let productIds = this.state.value || [];
            // 排除已存在的 product id
            let newProducts = products.map(o => o.Id).filter(o => productIds.indexOf(o) < 0);
            productIds.push(...newProducts);
            // this.state.productIds = productIds;
            this.setState({ value: productIds });
            return Promise.resolve();
        }
        render() {
            let { products } = this.state;
            products = products || [];
            return React.createElement("div", { className: "product-list-editor" },
                React.createElement("ul", { className: "selected-products", ref: (e) => this.productThumbers = e || this.productThumbers },
                    products.map(o => React.createElement("li", { key: o.Id, "product-id": o.Id, title: "\u62D6\u52A8\u56FE\u6807\u53EF\u4EE5\u5BF9\u5546\u54C1\u8FDB\u884C\u6392\u5E8F" },
                        React.createElement("img", { src: this.imageService.imageSource(o.ImagePath, 100), ref: (e) => e ? maishu_ui_toolkit_1.renderImage(e) : null }),
                        React.createElement("div", { className: "delete" },
                            React.createElement("button", { type: "button", className: "btn-link", ref: (e) => this.setProductDelete(e, o.Id) }, "\u5220\u9664")))),
                    React.createElement("li", { className: "product-add" },
                        React.createElement("i", { className: "icon-plus icon-4x", ref: (e) => this.setProductAdd(e) }))));
        }
    }
    exports.ProductSourceEditor = ProductSourceEditor;
});
